<template>
  <PageWrapper title="">
    <XGrid ref="xGrid"
      :columns="columns"
      :style-print="printStyle" 
      :show-overflow="false"
      :line="true"
      :stripe="false"
      is-tree
      @create="drawer.data.show = true"
      @edit="handleEdit">
    </XGrid>
    <Drawer :show="drawer.data.show" :is-update="drawer.data.isUpdate"
        :row="drawer.data.row"
        @on-success="onSuccess"
        @on-drawer-close="onDrawerClose"/>
  </PageWrapper>
</template>
<script lang="ts" name="Menu" setup>
import {ref, reactive} from 'vue';
import {PageWrapper} from '/@/components/Page';
import {XGrid} from '/@/components/XGrid';
import {columns, printStyle} from './data';
import Drawer from './Drawer.vue';

const xGrid = ref();

const drawer = reactive({data: {
  show: false,
  isUpdate: false,
  row: null,
}})

const handleEdit = (row_:any) => {
  drawer.data.show = true
  drawer.data.isUpdate = true
  drawer.data.row = row_
}

const onDrawerClose = () => {
  Object.assign(drawer, {data: {}})
}

const onSuccess = () => {
  xGrid.value.reload()
}
</script>
